<!--物模型表格-->
<template>
  <div class="model-table">
    <transition name="fade">
      <el-table
        v-show="activeName"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F5F6F7' }"
        size="medium">
        <template v-if="activeName === 'property'">
          <el-table-column prop="id" label="DP ID" width="80">
            <template slot-scope="scope">
              {{ scope.row.id || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="属性名称">
            <template slot-scope="scope">
              {{ scope.row.name || "-" }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="id" label="标识符">
            <template slot-scope="scope">
              {{ scope.row.id || "-" }}
            </template>
          </el-table-column> -->
          <el-table-column label="数据传输类型" :formatter="formatPermission">
          </el-table-column>
          <el-table-column prop="valueType" label="数据类型">
            <template slot-scope="scope">
              {{
                scope.row.valueType.type ? formatValueType[scope.row.valueType.type]
                : "-"
              }}
            </template>
          </el-table-column>
          <el-table-column label="数据说明">
            <template slot-scope="scope">
              <div v-if="scope.row.valueType.elements">
                <div
                  v-for="(item, index) in scope.row.valueType.elements"
                  :key="index">
                  {{ `${item.value}： ${item.text}` }}
                </div>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="备注">
            <template slot-scope="scope">
              {{ scope.row.description || "-" }}
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column v-if="activeName === 'event'" prop="EID" label="EID" width="80">
            <template slot-scope="scope">
              {{ scope.row.eid || "-" }}
            </template>
          </el-table-column>
          <el-table-column v-if="activeName === 'action'" prop="AID" label="AID" width="80">
            <template slot-scope="scope">
              {{ scope.row.aid || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="activeName === 'event' ? '事件名称' : '动作名称'">
            <template slot-scope="scope">
              {{ scope.row.name || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="标识符">
            <template slot-scope="scope">
              {{ scope.row.id || "-" }}
            </template>
          </el-table-column>
          <el-table-column v-if="activeName === 'event'" prop="valueType" label="事件级别">
            <template slot-scope="scope">
              {{ scope.row.level || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="description" label="备注">
            <template slot-scope="scope">
              {{ scope.row.description || "-" }}
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-tooltip v-if="developStatus == 1" content="产品已发布，信息不可修改，如需修改，请返回开发状态" placement="top">
              <el-button type="text" size="operate" disabled @click="handleDelete(scope.row.id)">删除</el-button>
            </el-tooltip>
            <el-button
              v-else
              type="text"
              size="operate"
              :disabled="tableData.length === 1 || rolesCode === 'SALE'"
              @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button v-if="activeName !== 'property'" type="text" size="operate" @click="viewProperties(scope.row.propertyIds)">查看属性</el-button>
          </template>
        </el-table-column>
      </el-table>
    </transition>
    <!-- <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination> -->
  </div>
</template>
<script>
import {
  propertiesList,
  detele
} from "@/api/product/product-details"
import { mapGetters } from "vuex"
export default {
  name: "physicalModel",
  props: {
    activeName: {
      type: String,
      default: 'property'
    }
  },
  data() {
    return {
      loading: true,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      tableData: [], // 功能列表数据
      productId: "", // 产品id
      developStatus: "", // 开发状态
      formatValueType: {
        // 数据类型
        boolean: "布尔型（boolean）",
        int: "整数型（int）",
        enum: "枚举（enum）",
        long: "长整数型（long）",
        float: "单精度浮点型（float）",
        double: "双精度浮点型（double）",
        text: "字符串（text）",
        date: "时间（date）"
      },
      selectedFuncData: [] // 已选功能数据
    }
  },
  computed: {
    ...mapGetters(["rolesCode"])
  },
  created() {
    this.productId = this.$route.query.productId
    this.developStatus = this.$route.query.developStatus
    this.queryFuncList()
  },
  methods: {
    // 功能列表
    queryFuncList() {
      this.tableData = []
      this.loading = true
      const params = {
        productId: this.productId
      }
      propertiesList(params)
        .then((res) => {
          if (this.activeName === 'property') {
            this.tableData = res.data.data.properties
          } else if (this.activeName === 'event') {
            this.tableData = res.data.data.events
          } else if (this.activeName === 'action') {
            this.tableData = res.data.data.actions
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        }).finally(() => {
          this.loading = false
        })
    },
    // 删除功能列表数据
    handleDelete(id) {
      const params = {
        productId: this.productId,
        id,
        tslType: this.activeName
      }
      detele(params)
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!"
          })
          this.queryFuncList()
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 查看属性
    viewProperties(propertyIds) {
      this.$emit('custom-event', propertyIds)
    },
    // 数据传输类型
    formatPermission(row) {
      const permissions = row.expands.type
      let displayText = ""
      permissions.forEach((permission) => {
        if (displayText !== "") {
          displayText += " "
        }
        switch (permission) {
          case "read":
            displayText += "读"
            break
          case "write":
            displayText += "写"
            break
          case "report":
            displayText += "上报"
            break
        }
      })
      return displayText
    }
  }
}
</script>
<style lang="scss" scoped>
.model-table {
  height: 100%;
  font-size: 14px;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    float: right;

    .title {
      font-weight: 600;
      color: #252525;
    }
  }

  .list {
    display: flex;
    justify-content: space-between;

    .contain-left,
    .selected-right {
      width: 438px;
      height: 531px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dedede;
      overflow: hidden;
      overflow-y: auto;

      .contain-left-header,
      .selected-right-header {
        height: 48px;
        background: #e9eaeb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        .title {
          font-weight: 600;
          color: #252525;
        }

        .select-btn,
        .delete-btn {
          font-weight: 400;
          color: #2b6ff8;
          cursor: pointer;
        }
      }

      .func-list,
      .selected-func-list {
        font-size: 12px;
        font-weight: 400;
        color: #808080;
        padding: 0;
        margin: 0;

        li {
          border-bottom: 1px solid #dedede;
          padding: 10px 16px;
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;

          .iconfont {
            cursor: pointer;
          }
        }

        .func-list-title {
          font-weight: 400;
          color: #252525;
          height: 20px;
          line-height: 20px;
        }

        .dpid {
          margin-right: 26px;
        }

        .desc {
          font-size: 12px;
          font-weight: 400;
          height: 17px;
          height: 17px;
        }
      }

      .no-data {
        text-align: center;
        margin-top: 200px;
        color: #252525;
      }
    }
  }
}

::v-deep .el-table__fixed-right-patch {
  background: #f5f6f7;
}

::v-deep .fade-enter-active,

::v-deep .fade-leave-active {
  transition: opacity 0.5s;
}

::v-deep .fade-enter,

::v-deep.fade-leave-to {
  opacity: 0;
}
</style>
